<template>
    <div>
        <div class="shitu">
            <el-upload
                    class="upload-demo"
                    action="http://127.0.0.1:8000/picture/upload/"
                    :headers="this.headers"
                    :on-preview="handlePreview"
                    :on-remove="handleRemove"
                    :on-success="get_results"
                    :before-upload="check_login"
                    :file-list="fileList"
                    list-type="picture">
                <el-button size="small" type="primary">点击上传</el-button>
                <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
            </el-upload>


        </div>
        <p class="p_text">{{results}}</p>
    </div>
</template>

<script>
    export default {
        name: "ShiTu",
        data() {
            return {
                headers: {
                    'Authorization': 'JWT ' + localStorage.getItem('token')
                },
                fileList: [],
                results: "",
                msg: ""
            };
        },
        methods: {
            check_login() {
                if (!localStorage.getItem('token')) {
                    this.$message({
                        message: "你还未有登录",
                        type: 'danger'
                    });
                    this.$router.push({name: "Login"})
                }
            },
            get_results(response) {
                if (response.status === 200) {
                    this.results = response.results[0];
                    // console.log(this.results)
                }
                else if (response.status === 201) {
                    this.results = response.results[0];
                    this.msg = response.msg;
                    // console.log(this.results)
                }
                else if (response.status === 202) {
                    this.msg = response.msg;
                    // console.log(this.results)
                }
                if (this.msg) {
                    this.$message({
                            message: this.msg,
                            type: 'danger'
                        }
                    )
                }

            },
            handleRemove(file, fileList) {
                console.log(file, fileList);
                console.log(this.headers)
            },
            handlePreview(file) {
                console.log(file);
            },

        }
    }
</script>

<style scoped>
    .p_text {
        line-height: normal;
    }

    .shitu {
        width: 600px;
    }
</style>